<template>
	<el-dialog :close-on-click-modal="false" :title="parameter.id ? ' 编辑' : '添加'" :visible.sync="show" v-if="show" width="45%"
	 v-loading="loading">
		<el-form ref="form" :model="request.data" :inline="true" label-width="80px" :rules="rules">
			<el-row>
				<el-col :span="24">
					<el-form-item label="名称" prop="title">
						<el-input v-model="request.data.title" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="描述" prop="description">
						<el-input v-model="request.data.description" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="类型" prop="type">
						<el-select v-model="request.data.type" placeholder="请选择">
							<el-option label="主菜" :value="1"></el-option>
							<el-option label="副菜" :value="2"></el-option>
							<el-option label="青菜" :value="3"></el-option>
							<el-option label="主食" :value="4"></el-option>
							<el-option label="其他" :value="5"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="口味" prop="isspicy">
						<el-select v-model="request.data.isspicy" placeholder="请选择">
							<el-option label="辣" :value="1"></el-option>
							<el-option label="不辣" :value="2"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="限购数量" prop="limnum">
						<el-input v-model="request.data.limnum" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="request.data.remark" autocomplete="off"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="submitForm('form')">确 定</el-button>
			<el-button @click="show = false">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import utils from 'util/utils.js';
	import validate from 'util/validate.js';
	import api from 'api/dishes/dishes/dishes.js';
	export default {
		name: 'edit',
		data() {
			return {
				loading: false,
				show: this.isDisplay,
				request: utils.newRequest(),
				rules: {
					title: [{
							validator: validate.required,
							trigger: 'blur'
						},
						{
							validator: validate.length,
							min: 0,
							max: 10,
							trigger: 'blur'
						}
					],
					title: [{
							validator: validate.required,
							trigger: 'blur'
						},
						{
							validator: validate.length,
							min: 0,
							max: 10,
							trigger: 'blur'
						}
					],
					description: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					type: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					pic: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					isspicy: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					limnum: [{
						validator: validate.digits,
						trigger: 'blur'
					}],
					flike: [{
						validator: validate.required,
						trigger: 'blur'
					}],
					remark: [{
							validator: validate.required,
							trigger: 'blur'
						},
						{
							validator: validate.length,
							min: 0,
							max: 500,
							trigger: 'blur'
						}
					]
				}
			};
		},
		methods: {
			//提交表单
			submitForm(formName) {
				utils.checkForm(this.$refs[formName], () => {
					this.loading = true;
					if (this.parameter.id) {
						//编辑
						api.update(
							this.request,
							response => {
								utils.msg.success(response.msg);
								this.loading = false;
								this.show = false;
								this.$parent.list(this.$parent.request);
							},
							response => {
								utils.msg.warning(response.msg);
								this.loading = false;
							}
						);
					} else {
						//添加
						api.save(
							this.request,
							response => {
								utils.msg.success(response.msg);
								this.loading = false;
								this.show = false;
								this.$parent.list(this.$parent.request);
							},
							response => {
								utils.msg.warning(response.msg);
								this.loading = false;
							}
						);
					}
				});
			},
			init() {
				this.request = utils.newRequest();
				if (this.parameter.id) {
					//编辑
					this.request.param.id = this.parameter.id;
					api.toUpdate(this.request, response => {
						this.request.data = response.data;
					});
				} else {
					//添加
				}
			}
		},
		props: {
			isDisplay: {
				type: Boolean,
				default () {
					return false;
				}
			},
			parameter: {
				type: Array | Object,
				default () {
					return {};
				}
			}
		},
		watch: {
			isDisplay(val) {
				this.show = val;
				if (val) {
					this.init();
				}
			},
			show(val) {
				this.$emit('update:isDisplay', val);
			},
			parameter(val) {
				this.parameter = val;
			}
		}
	};
</script>

<style lang="scss">
	@import '~common/custom/css/common.scss';
</style>
